<template>
    <section>
        <!--工具条-->
        <!-- <el-col :span="24" class="toolbar">
             <el-form :inline="true" :model="formInline" class="demo-form-inline">
                 <el-form-item>
                     <el-button  @click="toPage(62)"  :plain="true" type="primary" >返回</el-button>
                 </el-form-item>
             </el-form>
         </el-col>-->

        <!--数据列表-->
        <template>
            <el-table :data="tableData" stripe border style="width: 100%">
                <el-table-column prop="sql_content" label="SQL">
                </el-table-column>
                <el-table-column prop="sql_name" label="标题">
                </el-table-column>
                <el-table-column prop="hive_database_name" label="数据库">
                </el-table-column>
                <el-table-column prop="user_name" label="用户">
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template scope="scope">
                        <el-button @click="openSql(scope)" type="text" size="small">打开</el-button>
                        <el-button @click.native.prevent="deleteRow(scope)" type="text" size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!--分页-->
        <el-col :span="24" class="toolbar" style="padding-bottom:10px;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageParm.start_index"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageParm.page_size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageParm.count" style="float:right">
            </el-pagination>
        </el-col>
    </section>
</template>

<script>
  import dao from '../../common/dao'
  import {mapActions} from 'vuex'

  export default {
    data() {
      return {
        tableData: [],
        hive_database_name: '',
        pageParm: {
          "count": 0,//总条数
          "page_size": 20,//每页条数
          "page_count": 1,//总页数
          "start_index": 1//当前页数
        }
      }
    },
    methods: {
      ...mapActions([
        'setPage6Sql' // 映射 this.setuser() 为 this.$store.dispatch('setuser')
      ]),
      handleClick() {
        console.log(1);
      },
      toPage (p) {
        this.$router.push({path: `/page${p}`, query: {tabId: 'second'}});
      },
      deleteRow(scope) {
        this.$confirm('确认删除吗？', '提示', {
          type: 'info'
        }).then(() => {
          let data_hive_sql_id = scope.row.data_hive_sql_id;
          dao.deleteQuerySql({data_hive_sql_id}).then(res => {
            if (!res.body || res.body.retCode != '200') {
            util.apiMsg(res);
              return false;
            }
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getTableData();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      openSql(scope){
        let row = scope.row;
        let page6Sql = {
          data_hive_sql_id: row.data_hive_sql_id,
          sql_name: row.sql_name,
          hive_database_name: row.hive_database_name,
          sql_content: row.sql_content,
        };
        //this.$store.dispatch('setPage6Sql',page6Sql)
        this.setPage6Sql(page6Sql).then(res => {
          this.$router.push({
            path: `/page62`,
            query: {tabId: 'second'}
          });
        });
      },
      handleSizeChange (val) {
        this.pageParm.page_size = val;
        this.getTableData()
      },
      handleCurrentChange (val) {
        this.pageParm.start_index = val;
        this.getTableData()
      },
      getTableData(){
        let start_index = this.pageParm.start_index;
        let page_count = this.pageParm.page_size;
        dao.getQuerySql({start_index,page_count}).then(res => {
          if (!res.body || res.body.retCode != '200') {
          util.apiMsg(res);
          return false
          }
          this.pageParm.count = res.body.count
          this.tableData = res.body.results;
        })
      },
      pageInit(){
        let query = this.$store.state.route.query || {};
        this.hive_database_name = query.hive_database_name;
        this.getTableData()
      }
    },
    mounted(){
      this.pageInit();
    }
  }
</script>
